
import 'package:flutter/material.dart';
import 'package:flutter_trip/pages/search_page.dart';

class SpeakPage extends StatefulWidget {
  const SpeakPage({super.key});

  @override
  State<SpeakPage> createState() => _SpeakPageState();
}

class _SpeakPageState extends State<SpeakPage> with SingleTickerProviderStateMixin{
  String speakTip = '长按说话';
  String speakResult = '';
  late Animation<double> animation;
  late AnimationController animationController;

  @override
  void initState() {
    animationController = AnimationController(
        vsync: this,
      duration: Duration(milliseconds: 1000),
    );
    animation = CurvedAnimation(parent: animationController, curve: Curves.easeIn)..addStatusListener((status) {
      if (status == AnimationStatus.completed){
        animationController.reverse();
      }else if (status == AnimationStatus.dismissed){
        animationController.forward();
      }
    });
    super.initState();
  }
  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.fromLTRB(10, 50, 10, 30),
        child: Center(
          child: Column(
              mainAxisAlignment:MainAxisAlignment.spaceBetween,
            children: [
              _topItem(),
              _bottomItem(),
            ],
          ),
        ),
      ),
    );
  }

  _speakStart(){
    animationController.forward();
    setState(() {
      speakTip = "- 识别中 -";
    });

    Future.delayed(Duration(milliseconds: 500),(){
      setState(() {
        speakResult = "上海";
      });
      Navigator.pop(context);
      Navigator.push(context, MaterialPageRoute(builder: (context)=>SearchPage(showBackButton: true,keyWord: speakResult,)));
    });
  }

  _speakStop(){
    animationController.forward();
    setState(() {
      speakTip = "长按说话";
    });
    animationController.reset();
    animationController.stop();
  }

  _topItem(){
    return Column(
      children: [
        Container(
          child: Text("你可以这样说",style: TextStyle(fontSize: 16,color: Colors.black54),),
        ),
        Container(
          padding: EdgeInsets.only(top: 20),
          child: Text("故宫门票\n北京一日游\n迪士尼乐园",style: TextStyle(fontSize: 15,color: Colors.grey),),
        )
      ],
    );
  }

  _bottomItem(){
    return FractionallySizedBox(
      widthFactor: 1,
      child: Stack(
        children: [
          Center(
            child: Column(
              children: [
                Text(speakTip,style: TextStyle(fontSize: 12,color: Colors.blue),),
                Container(
                  margin: EdgeInsets.only(top: 10),
                  width: MIC_SIZE,
                  height: MIC_SIZE,
                  child: GestureDetector(
                      onTapDown: (e){
                        _speakStart();
                      },
                      onTapUp: (e){
                        _speakStop();
                      },
                      onTapCancel: (){
                        _speakStop();
                      },
                      child: Center(
                        child: Animationmic(listenable: animation,),
                      )
                  ),
                )
              ],
            ),
          ),
          Positioned(
              right: 20,
              bottom: 20,
              child: GestureDetector(
                onTap: (){
                  Navigator.pop(context);
                },
                child: Icon(Icons.close,size: 20,),
              ))
        ],
      ),
    );
  }

}

const double MIC_SIZE = 80;

class Animationmic extends AnimatedWidget{
  static final _opacityTween = Tween<double>(begin: 1, end: 0.5);
  static final _sizeTween = Tween<double>(begin: MIC_SIZE, end: MIC_SIZE- 20);
  Animationmic({required super.listenable});

  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable as Animation<double>;
    return Opacity(
        opacity: _opacityTween.evaluate(animation),
        child: Container(
          width: _sizeTween.evaluate(animation),
          height:_sizeTween.evaluate(animation),
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(MIC_SIZE / 2),
          ),
          child: Icon(
            Icons.mic,
            color: Colors.white,
            size: 30,
          ),
        ),
    );
  }

}